* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f5f5f5;
}

canvas {
    border: solid 2px cornflowerblue;
}

.toolbox {
    display: flex;
    width: 804px;
    padding: 1rem;
    background-color: cornflowerblue;
    border: solid 1px cadetblue;
}

/* 工具栏内所有子元素 */
.toolbox>* {
    /* 一般用于元素内部文字 居中 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: .25rem;
    padding: .25rem;
    width: 50px;
    height: 50px;
    font-size: 2rem;
    border: 0;
    cursor: pointer;
}

/* #clear的按钮,刷新画板 */
.toolbox>*:last-child {
    /* 新知识点:margin-right默认为0,width定宽之后,margin-left会自动占据剩余的全部宽度 */
    /* 因此,可以靠近最后侧,出自<css权威指南> P170 */
    margin-left: auto;
}